/**
 * 按钮样式封装文件
 */

// * 按钮默认样式
.f-btn {
  width: 85px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  // 行间距 且 居中
  letter-spacing: 5px;
  text-indent: 5px;
  user-select: none;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  &:active {
    opacity: 0.6;
  }
}

// * 彩色按钮样式封装
// 0°
.f-btn-color-0 {
  background: linear-gradient(0deg, #4a5aea, #9354f2);
}
// 90°
.f-btn-color-90 {
  background: linear-gradient(90deg, #1b59e0, #e646f6);
}
// 270°
.f-btn-color-270 {
  background: linear-gradient(270deg, #1b59e0, #e646f6);
}

// * 单色按钮样式封装
// 背景蓝、文字白
.f-btn-blue {
  background-color: @blue-color;
}
// 背景白、文字红
.f-btn-white-red {
  color: @red-color;
  border: 1px solid @border-color;
  background-color: #fff;
}
// 背景白、文字黑
.f-btn-white-black {
  color: #000;
  border: 1px solid @gray3-color;
  background-color: #fff;
}
// 背景白、文字蓝
.f-btn-white-blue {
  color: @blue-color;
  border: 1px solid @border-color;
  background-color: #fff;
}
// 背景透明、蓝色边框、文字白
.f-btn-blue-border {
  border: 1px solid @blue-color;
}
// 背景透明、红色边框、文字红
.f-btn-red-border-red {
  color: #D63D3D;
  border: 1px solid #D63D3D;
}
// 背景透明、蓝色边框、文字黑
.f-btn-blue-border-black {
  color: #000;
  border: 1px solid @blue-color;
}